@import '@/styles/variables.scss';

.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: $bg-color;
}

.empty-cart {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;
  
  .empty-image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: $spacing-lg;
  }
  
  .empty-text {
    font-size: $font-size-md;
    color: $text-color-secondary;
    margin-bottom: $spacing-lg;
  }
  
  .go-shopping {
    width: 240rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: $border-radius-md;
  }
}

.cart-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cart-list {
  flex: 1;
  background-color: $bg-color;
  padding-bottom: 120rpx;
  
  .cart-item {
    display: flex;
    align-items: center;
    padding: $spacing-base;
    background-color: #fff;
    margin-bottom: $spacing-xs;
    
    .checkbox {
      padding: 0 $spacing-sm;
      
      .checkbox-icon {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        border: 1px solid $border-color;
        display: flex;
        justify-content: center;
        align-items: center;
        
        &.checked {
          background-color: $primary-color;
          border-color: $primary-color;
          color: #fff;
        }
        
        .iconfont {
          font-size: $font-size-xs;
        }
      }
    }
    
    .item-content {
      flex: 1;
      display: flex;
      padding: 0 $spacing-sm;
      
      .item-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: $border-radius-sm;
        background-color: $bg-color-light;
        margin-right: $spacing-base;
      }
      
      .item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .item-name {
          font-size: $font-size-md;
          color: $text-color-primary;
          margin-bottom: $spacing-xs;
          line-height: 1.3;
        }
        
        .item-spec {
          font-size: $font-size-sm;
          color: $text-color-secondary;
          margin-bottom: $spacing-xs;
        }
        
        .item-price-wrapper {
          display: flex;
          align-items: center;
          
          .item-price {
            color: $primary-color;
            font-weight: bold;
            font-size: $font-size-lg;
            
            &::before {
              content: '¥';
              font-size: 80%;
              margin-right: 2rpx;
            }
          }
        }
      }
    }
    
    .item-action {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      
      .item-quantity {
        margin-bottom: $spacing-sm;
      }
      
      .item-delete {
        padding: $spacing-xs;
        
        .iconfont {
          font-size: $font-size-lg;
          color: $text-color-secondary;
        }
      }
    }
  }
}

.cart-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 $spacing-base;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  
  .select-all {
    display: flex;
    align-items: center;
    
    .checkbox-icon {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      border: 1px solid $border-color;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: $spacing-xs;
      
      &.checked {
        background-color: $primary-color;
        border-color: $primary-color;
        color: #fff;
      }
      
      .iconfont {
        font-size: $font-size-xs;
      }
    }
    
    .select-all-text {
      font-size: $font-size-sm;
      color: $text-color-secondary;
    }
  }
  
  .total-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 $spacing-base;
    
    .total-price-wrapper {
      display: flex;
      align-items: center;
      
      .total-price-label {
        font-size: $font-size-sm;
        color: $text-color-secondary;
      }
      
      .total-price {
        color: $primary-color;
        font-weight: bold;
        font-size: $font-size-lg;
        
        &::before {
          content: '¥';
          font-size: 80%;
          margin-right: 2rpx;
        }
      }
    }
    
    .total-count {
      font-size: $font-size-xs;
      color: $text-color-placeholder;
    }
  }
  
  .checkout-btn {
    width: 240rpx;
    height: 80rpx;
    border-radius: $border-radius-md;
    
    &.btn-disabled {
      opacity: 0.5;
      background-color: $text-color-placeholder;
    }
  }
} 